<template>

  <div ref="card">
    <div class="text-left pt40">
      <span class="title">关键指标</span>
      <span class="seperateline">|</span>
      <span class="subtitle" @click="$router.push('/shopAlter')">{{store.storeName}}
              <i class="iconfont icon-down downicon"></i>
      </span>
      <span class="scan" @click="scan"><i class="iconfont icon-header-scan"></i></span>
    </div>
    <div class="time-position">
      {{datePresent | formatDate}}
    </div>
    <mt-swipe :continuous="false" :stopPropagation="false" :auto="0" :speed="1">
      <mt-swipe-item v-for="data in datas" :key="data.$index">
        <switchState :value="data" :dizhi="data.bannerSort"></switchState>
      </mt-swipe-item>
    </mt-swipe>
    <div class="tip transition">
      <p class=""><i class="iconfont icon-ic_shouye_shangla "></i></p>
      <p>上拉加载更多</p>
    </div>
    <img src="../../assets/wave.png" class="wave"/>
  </div>

</template>
<script>
/**
 * @namespace  components/home/carousel
 * @author ashen
 * @description 首页滑动卡片
 */
import Vue from 'vue';
import { Swipe, SwipeItem } from 'mint-ui';
import api from '@/common/api/home';
import { mapGetters } from 'vuex';
import switchState from './switchState.vue';
import dateSet from '@/common/dateFilter.js';
import nativeApi from '@/common/native.js';

Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
export default {
  components: {
    switchState: switchState
  },
  activated () {
    api.getCarouselData().then(
      res => {
        if (res.bannerList.length === 0) {
          this.$router.push('/home/reports');
        } else {
          this.datas = res.bannerList;
        }
      },
      err => {
        console.log(err);
        this.datas = [];
      }
    );
    this.slides = this.$refs.card;
    this.slides.addEventListener('touchstart', this.start, false);
  },
  created () {
    let switchState = localStorage.getItem('switchState');
    switchState = switchState === 'true' || false;
    this.switchState = switchState;
  },
  data () {
    return {
      switchState: '',
      datePresent: new Date(),
      datas: []
    };
  },
  computed: {
    ...mapGetters(['store'])
  },
  methods: {
    moneyswitch () {
      this.switchState = !this.switchState;
      localStorage.setItem('switchState', this.switchState);
    },
    scan () {
      nativeApi.scan();
    },
    //滑动开始
    start (event) {
      var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
      this.startPos = { x: touch.pageX, y: touch.pageY, time: new Date() }; //取第一个touch的坐标值
      //console.log(this.startPos.y);
      this.isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
      this.slides.addEventListener('touchmove', this.touchMove, false);
      //this.slides.addEventListener('touchend', this.touchEnd, false);
    },
    touchMove (event) {
      //当屏幕有多个touch或者页面被缩放过，就不执行move操作
      if (
        event.targetTouches.length > 1 ||
        (event.scale && event.scale !== 1)
      ) {
        return false;
      }
      var touch = event.targetTouches[0];
      this.endPos = {
        x: touch.pageX - this.startPos.x,
        y: touch.pageY - this.startPos.y
      };
      this.isScrolling =
        Math.abs(this.endPos.x) < Math.abs(this.endPos.y) ? 1 : 0; //isScrolling为1时，表示纵向滑动，0为横向滑动
      if (this.isScrolling === 1) {
        event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
        if (this.endPos.y < 0) {
          if (Math.abs(this.endPos.y) > 150) {
            this.slides.removeEventListener('touchstart', this.start, false);
            this.slides.removeEventListener('touchmove', this.touchMove, false);
            this.$router.replace('/home/reports');
          }
        } else {
          this.slides.removeEventListener('touchmove', this.touchMove, false);
        }
      } else {
        this.slides.removeEventListener('touchmove', this.touchMove, false);
      }
    }
  },
  filters: {
    formatDate: function (time) {
      let date = new Date(time);
      return dateSet.formatDate(date, 'yyyy-MM-dd hh:mm:ss');
    }
  }
};
</script>
<style lang="scss" scoped>
.tip {
  position: absolute;
  top: 83vh;
  width: 100%;
  text-align: center;
  color: #b2b2b2;
  p {
    margin: 0;
  }
  
  }
  .transition {
    -webkit-animation-name: action_translateYOut;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite; /*无限循环*/
    -webkit-animation-timing-function: linear
  }
  @keyframes action_translateYOut {
    0% {
      transform: translateY(0px);
      opacity: 0.8;
    }
    100% {
      transform: translateY(-4px);
      opacity: 0;
    }
}
</style>
<style lang="scss">
@import '../../assets/css/variable';

.mint-swipe {
  height: 60%;
  .mint-swipe-indicator.is-active {
    background: $theme-color;
    opacity: 0.8;
  }
}
.scan {
  float: right;
  margin-right: px2rem(24px);
  i.iconfont {
    font-size: px2rem(52px);
  }
}
.wave {
  width: 100%;
  bottom: 0;
  left: 0;
  position: absolute;
}
.title {
  font-size: px2rem(40px);
  padding-left: px2rem(20px);
}

.subtitle {
  font-size: px2rem(27px);
}

.seperateline {
  color: #dedede;
  padding-right: px2rem(10px);
  padding-left: px2rem(10px);
}

.time-position {
  margin: 0 auto;
  margin-top: px2rem(60px);
  color: #999;
  text-align: center;
  width: px2rem(300px);
  line-height: px2rem(40px);
  border-radius: px2rem(20px);
  border: 1px solid #dedede;
}
.imgcan {
  text-align: center;
  padding-top: px2rem(50px);
  padding-bottom: px2rem(50px);
}
.showimg {
  width: px2rem(240px);
}
</style>
